<template>
  <div class="main-content-container">
    <!-- 网店咨询设置 -->
    <div class="editor buttons">
      <p style="margin-top:0" class="font-size-14-y font-weight">咨询情况模板</p>
      <editor-content class="editor__content box font-size-12-y" :editor="editor" />
      <el-button v-loading="loading" style="margin-top:0" @click="addTemplate">保存</el-button>
    </div>
    <p class="font-size-14-y font-weight" style="margin-top: 35px">不上门原因</p>
    <div>
      <el-table :data="tableData" border :row-class-name="tableColor" height="300" class="button-display">
        <el-table-column prop="name" label="取消原因" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <el-input v-if="row.isEadit" v-model="row.name" />
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="{ row }">
            <el-button type="text" @click="deleteOne(row.number, row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row type="flex" class="buttons">
      <el-button @click="addResult">增加</el-button>
      <el-button @click="SubmitResult">保存</el-button>
    </el-row>
  </div>
</template>

<script>
import { Editor, EditorContent } from "tiptap";
import { tableColor } from '@/utils/common.js';
export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      template: `<p>
            顾客诉求：
          </p>
          <P>
            顾客情况：
          </P>
          <P>
            诊断结果：
          </P>`,
      loading: false,
      tableData: [],
      editor: null,
      templateData: {},
      tableColor,
    };
  },

  beforeDestroy() {
    this.destroyPopup();
  },
  async mounted() {
    this.getDicoptList();
    this.getTemplate();
  },
  methods: {
    getTemplate() {
      this.$api["networkpower/consultationsetup/list"]({ 'templateType': '网电咨询模板' }).then((res) => {
        if (res.code !== 200) return this.$message.error("获取咨询模板失败");
        this.templateData = res.data;
        this.editor = new Editor({
          content: this.templateData.template,
          onUpdate: ({ state, getHTML, getJSON, transaction }) => {
            this.template = getHTML();
          },
        });
      });
    },
    getDicoptList() {
      // 查询不上门原因的表格数据
      this.$api["seting/siteConsul/getDicoptList"]({
        query: { dictionaryId: "798215514336788480" },
      }).then((res) => {
        if (res.code !== 200) return this.$message.error("查询表格数据失败");
        this.tableData = res.data.optionList;
      });
    },
    destroyPopup() {
      if (this.popup) {
        this.popup[0].destroy();
        this.popup = null;
      }
    },
    addTemplate() {
      // 点击模板保存this.template
      this.loading = true;
      const api = "networkpower/consultationsetup/eadit";
      // if (this.templateData.id) {
      //   api = "seting/siteConsul/UpdateTemplate";
      // }
      this.templateData.template = this.template;
      this.templateData.type = "网电咨询模板";
      this.$api[api](this.templateData).then((res) => {
        if (res.code !== 200) return this.$message.error("新增网电咨询模板失败");
        this.loading = false;
        if (this.editor) {
          this.editor.destroy();
        }
        this.getTemplate();
        return this.$message.success("保存成功");
      });
    },
    addResult() {
      // 新增原因保存
      this.tableData.push({ isEadit: true, number: Math.random() + 1 });
    },
    SubmitResult() {
      // 点击原因保存addDicopt
      console.log("原因不能为空", this.tableData);
      let bools = true;
      this.tableData.forEach(item => {
        if (!item.name) {
          bools = false;
          this.$message.error('原因不能为空');
        }
      });
      if (!bools) return false;
      this.$api["seting/siteConsul/addDicopt"]({
        dictionaryId: "798215514336788480",
        optionList: [...this.tableData],
      }).then((res) => {
        if (res.code !== 200) return this.$message.error("新增不成交原因失败");
        this.getDicoptList();
        return this.$message.success("保存成功");
      });
    },
    async deleteOne(number, id) {
      // 删除单个咨询分类数据
      const confirmResult = await this.$confirm("请确认是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      } else {
        let deletes = 0;
        this.tableData.forEach((item, i) => {
          if (item.number && item.number === number) {
            this.tableData.splice(i, 1);
            deletes = 2;
            i--;
          }
        });
        if (deletes === 0) {
          this.$api["seting/siteConsul/deleteDicopt"]({ id }).then((res) => {
            if (res.code !== 200) { return this.$message.error("删除不成交原因失败"); }
            this.getDicoptList();
            return this.$message.success("删除不成交原因成功");
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$color-black: #000000;
$color-white: #ffffff;
$color-grey: #dddddd;
.mention {
  background: rgba($color-black, 0.1);
  color: rgba($color-black, 0.6);
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 5px;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}
/deep/.ProseMirror p {
  margin-top: 0 !important;
  max-height: 300px;
  overflow-y: visible;
}
.box {
  border: 1px solid #D3DFF7 ;
  height: 120px;
  overflow-y: scroll;
  padding: 5px;
  // width: 40%;
}
.editor__content {
  margin-bottom: 10px;
}
.el-button {
  margin-top: 10px;
}

.box-show{
  padding-bottom: 20px;
  margin-top: 20px;
}
.el-table__body tr, .el-table__body td{
  font-size: 12px !important;
}
.font-weight{
  font-weight: bold;
}
/deep/.editor .box{
  height: 250px;
}
/deep/.button-display .el-button{
  margin: 0;
}
</style>
